<!--代码逻辑和样式库-->
<script src="./system-settings.component.js"></script>
<style src="./system-settings.scss" scoped lang="scss"></style>

<template>
  <div>
    <el-row class="aq-padding-top-32 aq-padding-bottom-32">
      <el-col :span="9">
        <div class="aq-text-size-normal aq-text-weight-bolder aq-padding-left-32">系统设定</div>
        <div class="aq-text-size-medium aq-padding-left-32 aq-padding-top-12">系统设定的规则</div>
        <div class="aq-text-size-small aq-search-text aq-padding-left-32 aq-padding-top-12">该菜单模块用作设定全平台的通用操作规则，一经设定全平台必须遵守该菜单中的相关设置，为考虑系统安全性请将该菜单权限交给专业系统管理人员</div>
      </el-col>
    </el-row>
    <!-- 内容区域 -->
    <div class="content-container">
      <div class="aq-text-size-normal aq-text-weight-bolder aq-padding-bottom-16">系统设定类型</div>
      <el-row :gutter="40">
        <el-col v-for="(item,index) of data" :key="index" :span="8">
          <div class="setting-card">
            <el-row :gutter="5">
              <el-col :span="6" class="text-center">
                <img src="@/assets/head.png" class="user-avatar" />
              </el-col>
              <el-col :span="16">
                <div>{{ item.name }}</div>
                <div class="aq-padding-top-12">{{ item.remark }}</div>
              </el-col>
            </el-row>
            <el-divider></el-divider>
            <div>
              <el-row class="aq-vertical-center">
                <el-col :span="11" class="text-center aq-text-size-small">{{ item.createUserName }}</el-col>
                <el-col :span="2" class="text-center">
                  <el-divider direction="vertical"></el-divider>
                </el-col>
                <el-col :span="11" class="text-center">
                  <el-link type="primary" :underline="false" class="aq-text-size-small" @click="openCreateOrEditDialog(item)">编辑</el-link>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <edit-system v-if="editDialogVisible" :select-data="selectData" @reload="reload()" @close="closeCreateOrEditDialog"></edit-system>
  </div>
</template>
